<template>
  <div class="max-box">
    <head1></head1>
    <el-row>
     <div class="block">
        <el-carousel height="650px" :interval="5000">
          <el-carousel-item v-for="(item,index) in img" :key="index">
            <img :src="item"/>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-row>
    <el-row class="select">
      <img src="../assets/img/home/selected.jpg"/>
    </el-row>
    <el-row class="run-title" type="flex" justify="start">
      <el-col :push="2" :span="2"><h3>跑鞋</h3></el-col>
      <el-col :push="18" :span="3"><h3 class="more" @click="choice(1)">查看更多</h3></el-col>
    </el-row>
    <el-row class="run-img" type="flex" justify="space-between">
      <el-col :span="3" :push="2">
        <el-card class="card-box1">
          <center><h3 class="sale">销量较好</h3></center>
          <el-divider></el-divider>
          <ul>
            <li v- v-for="item in card2" :key="item.id">
              <img :src="item.src"/>
              <div>
                <p>{{item.introduce}}</p>
                <span>￥{{item.price}}</span>
                <el-divider></el-divider>
              </div>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="19">
      <ul>
        <li v-for="item in goods1" :key="item.shoes_id" class="card-box2 fl" @click="getid(item.shoes_id)">
        <el-card class="goods1">
          <img :src="item.shoes_img" class="img"/>
          <div class="card-div">
            <p>{{item.memo}}</p>
            <span>价格：{{item.price}}￥</span>
          </div>
          </el-card>
        </li>
      </ul>
      </el-col>
    </el-row>
    <el-row class="casual-title" type="flex" justify="start">
      <el-col :push="2" :span="2"><h3>休闲</h3></el-col>
      <el-col :push="18" :span="3"><h3 class="more" @click="choice(2)">查看更多</h3></el-col>
    </el-row>
    <el-row class="casual-img" type="flex" justify="space-between">
      <el-col :span="3" :push="2">
        <el-card class="card-box1">
          <center><h3 class="sale">销量较好</h3></center>
          <el-divider></el-divider>
          <ul>
            <li v- v-for="item in card2" :key="item.id">
              <img :src="item.src"/>
              <div>
                <p>{{item.introduce}}</p>
                <span>￥{{item.price}}</span>
                <el-divider></el-divider>
              </div>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="19">
      <ul>
        <li v-for="item in goods2" :key="item.shoes_id" class="card-box2 fl" @click="getid(item.shoes_id)">
        <el-card class="goods1">
          <img :src="item.shoes_img" class="img"/>
          <div class="card-div">
            <p>{{item.memo}}</p>
            <span>价格：{{item.price}}￥</span>
          </div>
          </el-card>
        </li>
      </ul>
      </el-col>
    </el-row>
    <el-row class="basketball-title" type="flex" justify="start">
      <el-col :push="2" :span="2"><h3>篮球鞋</h3></el-col>
      <el-col :push="18" :span="3"><h3 class="more"  @click="choice(3)">查看更多</h3></el-col>
    </el-row>
    <el-row class="basketball-img" type="flex" justify="space-between">
      <el-col :span="3" :push="2">
        <el-card class="card-box1">
          <center><h3 class="sale">销量较好</h3></center>
          <el-divider></el-divider>
          <ul>
            <li v- v-for="item in card2" :key="item.id">
              <img :src="item.src"/>
              <div>
                <p>{{item.introduce}}</p>
                <span>￥{{item.price}}</span>
                <el-divider></el-divider>
              </div>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="19">
      <ul>
        <li v-for="item in goods3" :key="item.shoes_id" class="card-box2 fl" @click="getid(item.shoes_id)">
        <el-card class="goods1">
          <img :src="item.shoes_img" class="img"/>
          <div class="card-div">
            <p>{{item.memo}}</p>
            <span>价格：{{item.price}}￥</span>
          </div>
          </el-card>
        </li>
      </ul>
      </el-col>
    </el-row>
    <div class="new-box">
      <el-row justify="center" type="flex">
        <el-col :span="22"><img src="../assets/img/home/new1.jpg"></el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="22"><img src="../assets/img/home/blank1.jpg"></el-col>
      </el-row>
      <el-row justify="space-between" type="flex">
        <el-col><img src="../assets/img/home/new2.jpg"></el-col>
        <el-col><img src="../assets/img/home/new3.jpg"></el-col>
        <el-col><img src="../assets/img/home/new4.jpg"></el-col>
        <el-col><img src="../assets/img/home/new5.jpg"></el-col>
      </el-row>
      <el-row justify="space-between" type="flex">
        <el-col><img src="../assets/img/home/new6.jpg"></el-col>
        <el-col><img src="../assets/img/home/new7.jpg"></el-col>
        <el-col><img src="../assets/img/home/new8.jpg"></el-col>
        <el-col><img src="../assets/img/home/new9.jpg"></el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="22"><img src="../assets/img/home/blank2.jpg"></el-col>
      </el-row>
      <el-row justify="space-between" type="flex">
        <el-col><img src="../assets/img/home/new10.jpg"></el-col>
        <el-col><img src="../assets/img/home/new11.jpg"></el-col>
        <el-col><img src="../assets/img/home/new12.jpg"></el-col>
        <el-col><img src="../assets/img/home/new13.jpg"></el-col>
      </el-row>
      <center><div class="more-btn">选购更多商品</div></center>
      <el-row type="flex" justify="center">
        <el-col :span="22"><img src="../assets/img/home/blank2.jpg"></el-col>
      </el-row>
    </div>
    <footer1></footer1>
  </div>
</template>
<script>
import head1 from '@/components/head'
import footer1 from '@/components/footer'
import http from '@/utils/HttpUtil'
export default {
  data () {
    return {
      page_size: 8,
      curr_page: 1,
      category_id1: 1,
      category_id2: 2,
      category_id3: 3,
      action: {
        selectgoods: 'shoes_Web_exploded/Shoes/selectShoesByCategory'
      },
      img: [require('@/assets/img/login/zmd1.jpg'), require('@/assets/img/login/zmd2.jpg')],
      goods1: [],
      goods2: [],
      goods3: [],
      card2: [{
        id: 1,
        src: require('../assets/img/home/card1.jpg'),
        introduce: '特步 女子板鞋 2019夏季新款时尚休闲透气百搭鞋',
        price: '129.00'
      },
      {
        id: 2,
        src: require('../assets/img/home/card2.jpg'),
        introduce: '特步 女子板鞋 简约经典百搭 女子小白鞋',
        price: '139.00'
      }]
    }
  },
  components: {
    head1,
    footer1
  },
  computed: {

  },
  methods: {
    getGoodsList1 (curr_page = 1, page_size = 8, category_id = 1) {
      const params = {
        'curr_page': curr_page,
        'page_size': page_size,
        'category_id': category_id
      }
      http.xhrPost(this, this.action.selectgoods, params, (res) => {
        this.goods1 = res.data.list
        console.log(this.goods1)
      })
    },
    getGoodsList2 (curr_page = 1, page_size = 8, category_id = 2) {
      const params = {
        'curr_page': curr_page,
        'page_size': page_size,
        'category_id': category_id
      }
      http.xhrPost(this, this.action.selectgoods, params, (res) => {
        this.goods2 = res.data.list
        console.log(this.goods2)
      })
    },
    getGoodsList3 (curr_page = 1, page_size = 8, category_id = 3) {
      const params = {
        'curr_page': curr_page,
        'page_size': page_size,
        'category_id': category_id
      }
      http.xhrPost(this, this.action.selectgoods, params, (res) => {
        this.goods3 = res.data.list
        console.log(this.goods3)
      })
    },
    getid (id) {
      sessionStorage.setItem('shoes_id', id)
      this.$router.push('/goods')
    },
    choice (id) {
      sessionStorage.setItem('category_id', id)
      this.$router.push('/category')
    }
  },
  mounted () {
    this.getGoodsList1()
    this.getGoodsList2()
    this.getGoodsList3()
  }
}
</script>

<style lang="scss">
@import '../assets/style/common.scss';
.max-box {
  background-color: #f4f4f4;
  .block {
    width: 100%;
  }
}
.goods1 {
  cursor: pointer;
}
.select {
  margin-top: 30px;
  img {
    width: 100%;
    height: 100%;
  }
}
.run-title {
  padding-top: 30px;
  h3 {
    font-size: 22px;
    color: $red;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
  }
  .more {
    color: #666;
    cursor: pointer;
    &:after {
      content: '';
      background: url(../assets/img/home/tz.png) no-repeat;
      background-size: 100% 100%;
      display: inline-block;
      height: 24px;
      width: 24px;
      vertical-align: middle;
      margin-left: 34px;
    }
  }
}
.run-img {
  .card-box1 {
    margin-top: 45px;
    ul{
      li{
        img {
          height: 100%;
          width: 100%;
        }
        p {
          color: #696969;
          height: 56px;
          overflow: hidden;
          display: block;
          padding-bottom: 6px;
        }
        span {
          color: #9D0000;
          font-size: 14px;
        }
      }
    }
  }
  .card-box2 {
    width: 240px;
    height: 300px;
    padding-left: 35px;
    padding-top: 45px;
    .img {
      width: 100%;
      height: 100%;
      padding-bottom: 10px;
    }
    p {
      height: 40px;
      display: block;
      overflow: hidden;
      padding-bottom: 15px;
      color: #666;
      font-size: 12px;
    }
    span {
      color: $red;
    }
  }
}
.casual-title {
  padding-top: 90px;
  h3 {
    font-size: 22px;
    color: $red;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
  }
  .more {
    color: #666;
    cursor: pointer;
    &:after {
      content: '';
      background: url(../assets/img/home/tz.png) no-repeat;
      background-size: 100% 100%;
      display: inline-block;
      height: 24px;
      width: 24px;
      vertical-align: middle;
      margin-left: 34px;
    }
  }
}
.casual-img {
  .card-box1 {
    margin-top: 45px;
    ul{
      li{
        img {
          height: 100%;
          width: 100%;
        }
        p {
          color: #696969;
          height: 56px;
          overflow: hidden;
          display: block;
          padding-bottom: 6px;
        }
        span {
          color: #9D0000;
          font-size: 14px;
        }
      }
    }
  }
  .card-box2 {
    width: 240px;
    height: 300px;
    padding-left: 35px;
    padding-top: 45px;
    .img {
      width: 100%;
      height: 100%;
      padding-bottom: 10px;
    }
    p {
      height: 40px;
      display: block;
      overflow: hidden;
      padding-bottom: 15px;
      color: #666;
      font-size: 12px;
    }
    span {
      color: $red;
    }
  }
}
.basketball-title {
  padding-top: 90px;
  h3 {
    font-size: 22px;
    color: $red;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
  }
  .more {
    color: #666;
    cursor: pointer;
    &:after {
      content: '';
      background: url(../assets/img/home/tz.png) no-repeat;
      background-size: 100% 100%;
      display: inline-block;
      height: 24px;
      width: 24px;
      vertical-align: middle;
      margin-left: 34px;
    }
  }
}
.basketball-img {
  margin-bottom: 80px;
  ul{
    li{
      img {
        height: 100%;
        width: 100%;
      }
      p {
        color: #696969;
        height: 56px;
        overflow: hidden;
        display: block;
        padding-bottom: 6px;
      }
      span {
        color: #9D0000;
        font-size: 14px;
      }
    }
  }
  .card-box1 {
    margin-top: 45px;
  }
  .card-box2 {
    width: 240px;
    height: 300px;
    padding-left: 35px;
    padding-top: 45px;
    .img {
      width: 100%;
      height: 100%;
      padding-bottom: 10px;
    }
    p {
      height: 40px;
      display: block;
      overflow: hidden;
      padding-bottom: 15px;
      color: #666;
      font-size: 12px;
    }
    span {
      color: $red;
    }
  }
}
.new-box {
  background-color: #fff;
  width: 1290px;
  margin-left: 127px;
  margin-bottom: 40px;
  .more-btn {
    color: #fff;
    height: 50px;
    width: 300px;
    background: $red;
    border: 2px solid #fff;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    vertical-align: middle;
    cursor: pointer;
  }
}
.sale {
  font-size: 16px;
  color: red;
}
</style>
